<template>
  <div class="novel-detail-wrap">
    <div v-if="!reqAgain">
      <!--书籍信息简介-->
      <div class="book-detail-wrap flex">
        <p class="book-img">
          <img :src="novelDetail.cover" alt="">
        </p>
        <div class="book-info">
          <p class="info-item book-name">{{novelDetail.title}}</p>
          <p class="info-item book-author">{{novelDetail.author}}</p>
          <p class="info-item book-cate">{{novelDetail.category}}</p>
          <p class="info-item book-words">{{calcWords}}字</p>
        </div>
      </div>
      <!--书籍描述-->
      <div class="book-desc-wrap">
        <div class="read-btn" @click="readBook">阅读</div>
        <div class="book-desc">
          {{novelDetail.desc}}
        </div>
      </div>
      <!--最新章节-->
      <div class="book-catalog">
        <p class="catalog-title">最新章节</p>
        <p class="catalog-name" v-if="novelDetail.latest_chapter"
           @click="readBook({cid: novelDetail.latest_chapter.cid})">
          <span>{{novelDetail.latest_chapter.cname}}</span>
          <van-icon name="arrow" class="f-right"/>
        </p>
        <p class="" v-else>无</p>
      </div>
    </div>
    <!--重新加载-->
    <req-again :size="60" @reqAgainEvt="reqAgainEvt" v-else/>

    <div class="book-detail-loading" v-if="loading">
      <loading :loading="loading"></loading>
    </div>
  </div>
</template>
<script lang="ts">
  import {Component, Vue} from "vue-property-decorator";
  import loading from "@/components/loading";
  import reqAgain from "@/components/reqAgain";
  import utils from "@/common/utils";
  import {Icon} from "vant";

  @Component({
    components: {
      loading,
      reqAgain,
      [Icon.name]: Icon
    }
  })
  export default class NovelDetail extends Vue {
    private loading: boolean = true;
    private reqAgain: boolean = false; // 是否需要重新加载
    private novelDetail: object = {};

    mounted() {
      this.getNovelDetail(this.$route.query.name);
    }

    getNovelDetail(name: string = "") {
      this.reqAgain = false;
      this.loading = true;
      this.$api
        .get("/novelInfoApi", {name})
        .then((res: any) => {
          if (res && res.aladdin) {
            this.novelDetail = res.aladdin;
          }
        })
        .catch((e: any) => {
          this.reqAgain = true;
        })
        .finally(() => {
          this.loading = false;
        });
    }

    readBook(params: object) {
      this.$dialog.confirm({
        title: "注意",
        message: "暂不提供在线阅读，是否跳转到第三方网站（仅供测试，侵权联系删）以继续"
      }).then(() => {
        if (params.cid) {
          // 根据章节ID跳转
          location.href = `http://t.shuqi.com/route.php?pagename=#!/bid/${this.novelDetail.bid}/cid/${params.cid}/ct/read`;
        } else {
          // 直接打开书籍第一章节
          location.href = `http://t.shuqi.com/route.php?pagename=#!/bid/${this.novelDetail.bid}/ct/read`;
        }
      }).catch(() => {
      });
    }

    // 点击重新加载
    reqAgainEvt() {
      this.getNovelDetail(this.$route.query.name);
    }

    get calcWords() {
      return utils.formatBigNum(this.novelDetail.words);
    }

  }
</script>
<style lang="scss">
  .novel-detail-wrap {
    width: 100%;
    .book-detail-loading {
      width: 100%;
      height: 100%;
      background: #fff;
      position: fixed;
      left: 0;
      top: 0;
      z-index: 10;
    }
    .book-detail-wrap {
      padding: 16px 16px;
      background: linear-gradient(to top, #fff, rgba(0, 0, 0, .13)) no-repeat center bottom;
      .book-img {
        margin-right: 10px;
        img {
          width: 84px;
          height: 112px;
        }
      }
      .book-info {
        font-size: 14px;
        .info-item {
          &:last-child {
            margin-bottom: 0;
          }
        }
        .book-name {
          font-size: 18px;
          font-weight: bold;
          color: #333;
          margin-bottom: 4px;
        }
        .book-author {
          font-size: 15px;
          margin-bottom: 2px;
        }
      }
    }
    .book-desc-wrap {
      padding: 0 16px;
      .read-btn {
        width: 100%;
        height: 34px;
        line-height: 34px;
        text-align: center;
        box-shadow: 0 0 6px 1px rgba(0, 0, 0, .2);
        margin-bottom: 15px;
        background: #ed424b;
        color: #fff;
        border-radius: 3px;
        user-select: none;
        &:active {
          background: #c7363e;
          color: #eaeaea;
        }
      }
      .book-desc {
        margin-bottom: 15px;
        line-height: 22px;
        text-indent: 16px;
      }
    }
    .book-catalog {
      padding: 10px 16px;
      background: #f4f4f4;
      .catalog-title {
        font-weight: bold;
        font-size: 14px;
      }
      .catalog-name {
        padding: 10px 0;
      }
    }
  }
</style>


